<template>
  <van-config-provider inset :theme-vars="btn">

    <ul class="login">
      <li><van-button block plain type="primary" color="#fb7299" @click="handleClick">注册</van-button></li>
      <li><van-button block type="primary" color="#fb7299" :disabled="store_changeShow.display"
          @touchstart="handleLogin">登录</van-button>
      </li>
    </ul>


  </van-config-provider>
</template>
<script lang="ts" setup>
import useChangeShowStore from '@/store/login-changeShow';
import { ConfigProvider as vanConfigProvider, Button as vanButton, showToast } from 'vant'
import type { ButtonThemeVars } from 'vant'
import useUserStore from '@/store/login-user.ts'
import axios from 'axios';
import { useRouter } from 'vue-router';
// import { onMounted } from 'vue'


const router = useRouter()
const store_user = useUserStore()
const store_changeShow = useChangeShowStore()

const handleClick = () => {
  store_changeShow.changeShow()
  store_changeShow.changeText()
}


const btn: ButtonThemeVars = {
  buttonDefaultHeight: '40px'
}


// onMounted(() => {






// })


const handleLogin = async () => {
  const res = await axios({
    method: 'get',
    url: 'http://localhost:3000/users',
  })


  const user = res.data.filter((item: { id: number, account: string, password: string }) => {
    return item.account == store_user.userAccount && item.password == store_user.userPassword
  })
  // console.log(user)
  if (!store_user.userAccount && !store_user.userPassword) showToast('请输入手机号和密码')
  else if (store_user.userAccount && !store_user.userPassword) showToast('请输入密码')
  else if (!store_user.userAccount && store_user.userPassword) showToast('请输入手机号')
  else if (user.length === 0) showToast('手机号或密码输入错误')
  else {
    sessionStorage.setItem('token', 'true')
    router.push('/login/user')
    sessionStorage.setItem('user', `${store_user.userAccount}`)
    // console.log()
    store_user.Reload()
  }
}


</script>
<style scoped lang="scss">
.login {
  display: flex;

  li {
    flex: 1;
    padding: 1.5vw;
  }

  .login li:nth-child(1) {
    margin-left: 1.5vw;
  }

  .login li:nth-child(2) {
    margin-right: 1.5vw;
  }
}
</style>